<template>
  <div style="height: 100%">
    <el-container style="height: 100%">
      <!-- 侧边栏 -->
      <el-aside width="80px" style="max-width: 250px; height: 100%">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          @select="handleMenuSelect"
          background-color="#3c3755"
          text-color="#fff"
        >
          <el-menu-item index="1" class="menu-item">
            <img
              class="normal-icon"
              src="../../assets/icons/20240321-06.png"
              alt="Data Icon"
            />
            <img
              class="hover-icon"
              src="../../assets/icons/20240321-05.png"
              alt="Data Icon"
            />
            数据管理
          </el-menu-item>
          <el-menu-item index="2" class="menu-item">
            <img
              class="normal-icon"
              src="../../assets/icons/20240321-07.png"
              alt="Interface Icon"
            />
            <img
              class="hover-icon"
              src="../../assets/icons/20240321-08.png"
              alt="Interface Icon"
            />
            断面管理
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 右侧内容区域 -->
      <el-container>
        <el-header style="text-align: right; background-color: #f5f7fa">
          <!-- 这里放置头部内容 -->
          <h1>111</h1>
        </el-header>

        <el-main>
          <!-- 这里放置主要内容 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Main",
  methods: {
    handleMenuSelect(index) {
      // 根据菜单项的索引来切换页面内容
      switch (index) {
        case "1":
          this.$router.push("/main/information-management");
          break;
        case "2":
          this.$router.push("/main/interface-management");
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style>
.el-menu-vertical-demo {
  height: 100%;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 垂直居中对齐 */
  text-align: center; /* 文字居中对齐 */
  height: 80px; /* 设置菜单项的高度 */
  line-height: 20px;
}

.normal-icon,
.hover-icon {
  width: 25px; /* 设置图标大小 */
  height: 25px; /* 设置图标高度 */
  margin-bottom: 5px; /* 调整图标与文字之间的垂直间距 */
  vertical-align: middle; /* 垂直居中对齐 */
}

.normal-icon {
  display: inline-block; /* 默认显示普通图标 */
}

.hover-icon {
  display: none; /* 默认隐藏鼠标移入图标 */
}

.menu-item:hover .normal-icon {
  display: none; /* 鼠标移入时隐藏普通图标 */
}

.menu-item:hover .hover-icon {
  display: inline-block; /* 鼠标移入时显示悬停图标 */
}
</style>
